<template>
  <div class="wzl">
        <Navbar :title='nb.title' ></Navbar>
        <Slideshow :obj='nb'></Slideshow>
        <purchased :obj='nb'></purchased>
        <tail></tail>
  </div>
</template>

<script>
import Navbar from './Navbar.vue'
import Slideshow from './Slideshow.vue'
import purchased from './purchased.vue'
import tail from './tail.vue'

import { littlebro } from './list/index'

export default {
  components: {
    Navbar,
    Slideshow,
    purchased,
    tail

  },
  data () {
    return {
      livingId: this.$route.params.livingId,
      nb: {}
    }
  },
  created () {
    // console.log(this.livingId)
    this.littlebro()
  },
  methods: {
    async littlebro () {
      const { data } = await littlebro()
      const b = data
      // console.log(b, b[0].id, b[0]
      const livingId = this.livingId
      // console.log(livingId)
      const newb = b.filter(v => {
        return v.id === livingId
      })

      this.nb = newb[0]
      // console.log(this.nb)
    }
  }
}
</script>

<style scoped lang='less'>
    // .wzl{
    //     // background-color: skyblue;
    // }
</style>
